<template>
    <div :id="this.id" class="chartDiv" style="height: 100%;width:100%">
        <div class="edit">
            <i @click="openChart" title="编辑" class="fa fa-edit" aria-hidden="true"></i>
        </div>
        <div class="close">
            <i @click="deleteChart" title="关闭" class="fa fa-trash" aria-hidden="true"></i>
        </div>
        <div class="vue-draggable-handle">
            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
        </div>
        <div class="title chartDivTitle"></div>
        <div :id="this.chartId" class="vue-no-draggable-handle" style="width:90%;height: 100%"></div>
    </div>
</template>

<script>

    export default {
        name: "chartDiv",
        components: {
        },
        props: {
            id: String,
        },
        data() {
            return {
                chartId: '',
                currentChartDiv: ''
            }
        },
        methods: {
            openChart(e) {
                this.$emit('openChart');
                // this.currentChartDiv = $(e.target).parent().parent().find('.chart').attr('id');
                this.$Bus.$emit('currentChartDiv', this);
            },
            deleteChart() {
                let nowElement = document.getElementById(this.id).parentElement.id;
                this.$emit('deleteSelectElement', nowElement);
            },
        },
        mounted() {
            this.chartId = 'cha' + this.id;
        }
    }
</script>

<style>

    .edit {
        /*background: #5daf34;*/
        position: absolute;
        right: 5%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
        z-index: 100;
    }
    .title{
        position: absolute;
        left: 0;
        width: 100%;
        top: 10%;
        font-size: 10px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        /*display: inline-flex;*/
        cursor: pointer;
        z-index: 100;
        text-align: center;
    }
    .close {
        /*background: #5daf34;*/
        position: absolute;
        right: 0.5%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
        z-index: 100;
    }

    .vue-draggable-handle {
        /*background: #5daf34;*/
        position: absolute;
        left: 0.5%;
        top: 1%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
        z-index: 100;
    }

    .vue-draggable-handle:hover {
        color: #4060ff
    }

    .edit:hover {
        color: #4060ff
    }

    .close:hover {
        color: #4060ff
    }

    .el-main {
        line-height: 30px;
    }

</style>